<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 刘洪历
  Date: 2017/12/12
  Time: 9:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"
          type="text/css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"
            type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"
            type="text/javascript"></script>
    <audio id="ddap" autoplay="true" loop="false"
           src="http://cdnringuc.shoujiduoduo.com/ringres/user/a48/399/34833399.aac"></audio>
    <style>

        #div {
            position: absolute;
            background-color: aliceblue;
            margin: 0px auto;
            height: 100%;
            width: 100%;
        }

        h1 {
            text-align: center;
        }

        #p1 {
            position: absolute;
            background-color: wheat;
            height: 500px;
            width: 1000px;
            margin-top: 5%;
            margin-left: 20%;
        }

        #div1 {
            position: absolute;
            background-color: #a6e1ec;
            height: 16%;
            width: 100%;
            margin-top: 45%;
        }

        #input { /*margin-top: 30%;*/
            /*margin-top: 9px;*/
            position: absolute;
            height: 95%;
            width: 70%;
            font-size: 20px;
            font-family: "Courier New";
        }

        #submit {
            position: absolute;
            height: 95%;
            width: 30%;
            margin-left: 70%;
        }

        #left {
            position: absolute;
            height: 95%;
            width: 20%;
            background-color: #a6e1ec;
        }

        #right {
            position: absolute;
            height: 90%;
            width: 80%;
            margin-left: 20%;
            border: 1px solid red;
        }

        #leftTop {
            position: absolute;
            height: 14%;
            width: 100%;
            border: 1px solid black;
        }

        #navOfChat {
            position: absolute;
            width: 100%;
            height: 89%;
            border: 1px solid black;
            overflow: auto;
            font-size: 24px;
            font-family: "Courier New";
            background-image: url("/image/chat/3.jpg");
            opacity: 0.6;
            backgroun-size: 100% 100%;
            background-repeat: no-repeat;
        }

        #leftBottom {
            position: absolute;
            height: 83%;
            width: 100%;
            border: 1px solid red;
            margin-top: 33%;
            background-image: url("/image/chat/6.jpg");
            background-repeat: no-repeat;
            overflow: auto;
            color: aquamarine;
            font-size: 24px;
        }

        #myModal {
            position: absolute;
        }
    </style>
</head>
<body>
<jsp:include page="head.jsp"/>
<div id="div">
    <%--<h1>广播厅</h1>--%>
    <div id="p1">
        <div id="left">
            <div id="leftTop">
                <%--信息总数：<span id="onlineMessage"></span>--%>
                <h3>在线人数：<span id="onlineUser"></span></h3>
            </div>
            <div id="leftBottom">

            </div>
        </div>
        <div id="right">
            <h3 align="center">用户交流</h3>
            <nav id="navOfChat">
                <table id="navTable" align="center"
                       class="table table-striped table-bordered table-hover table-condensed">
                    <tr>
                        <th>用户名</th>
                        <th>消息</th>
                        <th>时间</th>
                    </tr>
                </table>
            </nav>

        </div>
        <div id="div1">
            <input type="text" id="input">
            <input type="button" id="submit" value="点击发送">
            <%--<a href="javascript:void(0)" id="submit" style="color: red">提交</a>--%>
        </div>
    </div>
</div>
<script>


    <!--禁止页面刷新-->
    document.onkeydown = function () {
        /*
        (ctrlKey == true && keyCode == 82)   Ctrl+R   ---刷新
        (keyCode == 116)                     F5       ---刷新
        (ctrlKey == true && keyCode == 116)  Ctrl+F5  ---强制刷新
        */
        //window.alert(event.keyCode);
        var k = event.keyCode;
        if ((event.ctrlKey == true && k == 82) || (k == 116) || (event.ctrlKey == true && k == 116)) {
            //return (window.confirm("关闭?"));
            event.keyCode = 0;
            event.returnValue = false;
            event.cancelBubble = true;
        }
    }
    var arr = new Array();
    window.setInterval(getMsg, 1000);
    var c = 0;

    function getMsg() {
        $.get(
            "/getChatMsg.do",
            {count: c},
            function (dt) {
                if (dt != null) {
                    for (var i = 0; i < dt.length; i++) {
                        var count = dt[i].cCount;
                        var username = dt[i].username
                        var message = dt[i].message;
                        var userDate = dt[i].date;
                        var uid = dt[i].uid;
                        c = count;
                        console.log("这是第" + count + "条" + message)
                        $("#navTable").append("<tr>" +
                            "<td>" + username + "" + "</td>" +
                            "<td>" + message + "</td>" +
                            "<td>" + userDate + "</td>" +
                            "</tr>");
                        $("#leftBottom").append("<tr>" +
                            "<td id='uid' class='' data-toggle='modal' onclick='getUserName(this.innerHTML)'>"
                            + "用户名:" + username + "" + "</td>" +
                            "</tr>");
                        arr.push(username);
                        arr.sort();
                        for (var i = 1; i < arr.length; i++) {
                            //用当前的元素与他的前一个元素进行对比
                            if (arr[i] == arr[i - 1]) {
                                //如果相同的话,就删除掉第i个元素
                                arr.splice(i, 1);
                            }
                        }
                        $("#onlineUser").html(arr.length + "人")
                    }
                }

            },
            "json"
        );
        document.getElementById("navOfChat").scrollTop = document.getElementById(
            "navOfChat").scrollHeight;
        document.getElementById("leftBottom").scrollTop = document.getElementById(
            "leftBottom").scrollHeight;
    }

    var i = 0;
    $("#submit").click(function () {
        $.ajax(
            {
                url: "/chat.do",
                data: {
                    msg: $("#input").val()
                }
            }
        );
        $("#input").val("");
    })

    function getUserName(val) {
        //用户名：小刘
        var atUserName = val.substring(4)
        $("#toUserChat").html(atUserName)
    }

</script>
</body>
</html>
